<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24" :offset="0">
        <el-card shadow="always">
          <div class="chart" id="line"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <el-card shadow="always">
          <div class="chart" id="bar"></div>
        </el-card>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-card shadow="always">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="显示pie" name="pieArr"></el-tab-pane>
            <el-tab-pane label="显示pie1" name="pieArr1"></el-tab-pane>
          </el-tabs>
          <div class="chart" id="pie"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import bar from "./options/bar";
import line from "./options/line";
import pie from "./options/pie";
import { pieGet } from "@/api/job";
export default {
  beforeRouteLeave(to, from, next) {
    console.log("路由即将离开");
    next();
  },
  data() {
    return {
      activeName: "pieArr",
      pieArr: [],
      pieArr1: [],
    };
  },
  methods: {
    handleClick() {
      console.log(this.activeName);
      pie.series[0].data = this[this.activeName];
      console.log(pie);
      this.myPie.setOption(pie);
    },
  },
  mounted() {
    // 柱状图
    var myChart = echarts.init(document.getElementById("bar"));
    myChart.setOption(bar);

    // 折线图
    var myLine = echarts.init(document.getElementById("line"));
    myLine.setOption(line);

    // 饼状图
    this.myPie = echarts.init(document.getElementById("pie"));
    pieGet().then((res) => {
      console.log(res);
      this.pieArr = res.data.results[0].pie;
      this.pieArr1 = res.data.results[0].pie1;
      pie.series[0].data = this.pieArr;
      console.log(pie);
      this.myPie.setOption(pie);
    });
  },
};
</script>

<style lang="scss" scoped>
.chart {
  height: 300px;
  /* border: 1px solid red; */
}
</style>
